<template>
	<view class="card">
		<view v-if="title" class="card-title" :data-text="title">
      <text>{{ title }}</text>
      <view class="card-title-suffix">
        <slot name="title"></slot>
      </view>
    </view>
		<view class="card-content">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	import { ref, defineProps } from "vue"
	
	const props = defineProps({
		title: ''
	})
</script>

<style lang="scss" scoped>
	.card {
		padding: 12px;
		min-height: 100px;
		border-radius: 12px;
		background-color: #fff;
		box-shadow: 0px 0px 12px 0px rgba(42, 122, 255, 0.05);
		
		&-title {
			font-weight: bold;
			font-size: 18px;
			margin-bottom: 16px;
			position: relative;
			z-index: 99;
			padding-left: 12px;
      display: flex;
      align-items: center;
			
			&::after {
				content: '';
				position: absolute;
				top: 15%;
				left: 0;
				height: 70%;
				border-radius: 6px;
				width: 3px;
				background-color: var(--td-brand-color);
			}

      &-suffix {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        column-gap: 6px;
      }
		}
		
		&-content {
			font-size: 15px;
		}
	}
</style>